<template>
  <div class="mine">
    <div class="mine-head">
      <div class="header-box">
        <img :src="userinfro.avatar" alt="" />
        <div>
          <p class="header-tit">{{ userinfro.username }}</p>
          <p>个人简介：{{ userinfro.resume }}</p>
        </div>
      </div>
      <div class="sale">
        <p class="header-tit">{{ userinfro.point }}</p>
        <p>积分</p>
      </div>
    </div>
    <div class="mine-con">
      <div class="mine-left">
        <p class="left-tit">用户中心</p>
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          @select="handleOpen"
        >
          <el-menu-item index="1">
            <img src="@/assets/img/pic1.png" alt="" />
            <span slot="title"> 个人信息 </span>
          </el-menu-item>
          <el-menu-item index="2">
            <img src="@/assets/img/pic2.png" alt="" />
            <span slot="title"> 我的投稿 </span>
          </el-menu-item>
          <el-menu-item index="3">
            <img src="@/assets/img/pic3.png" alt="" />
            <span slot="title"> 收藏点赞 </span>
          </el-menu-item>
          <el-menu-item index="4">
            <img src="@/assets/img/pic4.png" alt="" />
            <span slot="title"> 最近浏览 </span>
          </el-menu-item>
          <el-menu-item index="5">
            <img src="@/assets/img/pic5.png" alt="" />
            <span slot="title"> 我的工单 </span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="mine-right">
        <div class="right-con" v-if="meunIndex == '1'">
          <p class="person-infro">个人信息</p>
          <el-divider></el-divider>
          <el-form
            ref="personForm"
            label-width="200px"
            class="personForm"
          >
            <el-form-item label="头像" prop="name">
              <el-image
                style="width: 100px; height: 100px"
                :src="userinfro.avatar"
              >
              </el-image>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="userinfro.nickname"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="userinfro.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userinfro.mobile"></el-input>
            </el-form-item>
            <el-form-item label="职位">
              <el-input v-model="userinfro.position"></el-input>
            </el-form-item>
            <el-form-item label="工作年限">
              <el-input v-model="userinfro.workYear"></el-input>
            </el-form-item>
            <el-descriptions>
              <el-descriptions-item label="个人简介">{{
                userinfro.resume
              }}</el-descriptions-item>
            </el-descriptions>
          </el-form>
        </div>
        <div class="right-con" v-show="!isShow" v-if="meunIndex == '2'">
          <el-button class="btn" type="primary" @click="getFrom"
            >新增文章</el-button
          >
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane
              :label="item.name"
              :name="item.statuses + ''"
              v-for="(item, index) in useroption"
              :key="index"
            >
              <div v-if="articleList.length > 0">
                <ul class="all-con">
                  <li
                    class="all-list"
                    v-for="(item, index) in articleList"
                    :key="item.avdId"
                  >
                    <div class="img-list" @click="getDetail(item.avdId)">
                      <img :src="item.cover" alt="" />
                      <i v-if="item.module == 2" class="el-icon-video-play"></i>
                    </div>
                    <div class="img-con">
                      <div @click="getDetail(item.avdId)">
                        <p class="img-title">{{ item.title }}</p>
                        <p class="img-intro">{{ item.description }}</p>
                        <ul>
                          <li v-for="tag in item.tags" :key="tag.avdRelItemId">
                            {{ tag.name }}
                          </li>
                        </ul>
                      </div>
                      <div class="img-bottom">
                        <div class="bot-left">
                          <img :src="item.user.creatorAvatar" alt="" />
                          <p>{{ item.user.creatorName }}</p>
                        </div>
                        <div class="bot-right">
                          <p>
                            <img src="@/assets/img/read.png" alt="" />
                            <span>{{ item.viewNum }}</span>
                          </p>
                          <p>
                            <b @click="getGood(index, item.avdId)">
                              <img
                                v-if="item.isGood"
                                src="@/assets/img/goodicon.png"
                                alt=""
                              />
                              <img
                                v-else
                                src="@/assets/img/goodred.png"
                                alt=""
                              />
                            </b>
                            <span>{{ item.likeNum }}</span>
                          </p>
                          <p>
                            <b @click="getCollect(index, item.avdId)">
                              <img
                                v-if="item.isCollect"
                                src="@/assets/img/collect.png"
                                alt=""
                              />
                              <img
                                v-else
                                src="@/assets/img/collectred.png"
                                alt=""
                              />
                            </b>
                            <span>{{ item.collectNum }}</span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- 分页 -->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="allParams.page"
                  :page-sizes="[4, 8, 16, 20]"
                  :page-size="allParams.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
              <div v-else>
                <el-empty>
                  <el-button type="primary" @click="getFrom"
                    >新建文章</el-button
                  >
                </el-empty>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right-con" v-if="meunIndex == '3'">
          <collect></collect>
        </div>
        <div class="right-con" v-if="meunIndex == '4'">
          <browse></browse>
        </div>
        <div class="right-con" v-if="meunIndex == '5'">
          <workOrder></workOrder>
        </div>
        <div class="right-from" v-show="isShow">
          <h3>新增文章</h3>
          <newArticle></newArticle>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserinfro, getUserOption, myArticle } from "./../../api/user";
import {
  getActicleoption,
  getActicleSave,
  getGuideList,
  getGuideAdd,
  getGuideReduce,
  getGuidesuccess,
} from "./../../api/guide";
import newArticle from "../../components/newArticle.vue";
import collect from "@/components/collect.vue";
import browse from "@/components/Browse.vue";
import workOrder from "@/components/workOrder.vue";
import $ from "jquery";
import { getToken } from "@/utils/token.js";
// import { elEmpty} from 'element-ui'
export default {
  components: {newArticle, collect, browse, workOrder },
  data() {
    return {
      tabPosition: "left",
      isShow: false,
      userinfro: "",
      useroption: "",
      meunIndex: "1",
      activeName: "1,2,3,4",
      allParams: {
        //我的投稿
        approveStatuses: [1, 2, 3, 4],
        isPrivate: true,
        isPublic: false,
        page: 1,
        size: 4,
        title: "",
        module: 0,
        typeIds: [],
      },
      articleList: [],
      total: 0,
      typeOption: [],
      brandOption: [],
      moduleOption: [],
      tagOption: [],
    };
  },
  methods: {
    handleOpen(e) {
      this.meunIndex = e;
      console.log(this.meunIndex, "333333");
      if (this.meunIndex != 2) {
        this.isShow = false;
      }
    },
    // 我的投稿
    getMyArticle(val) {
      let user = {
        creatorAvatar: "",
        creatorName: "",
        creatorId: "",
      };
      myArticle(val).then((res) => {
        if (res.code == 200) {
          this.total = res.result.total;
          this.articleList = res.result.list;
          this.articleList.map((item) => {
            this.$set(item, "isGood", "true");
            this.$set(item, "isCollect", "true");
          });
          // console.log(this.articleList);
          this.articleList.map((item) => {
            if (item.user == null) {
              // console.log(item);
              item.user = JSON.parse(JSON.stringify(user));
            }
          });
        } else {
          this.$message.warning("请登录，查看个人中心");
        }
      });
    },
    // 点赞
    getGood(index, id) {
      // console.log(index,id);
      let item = this.articleList[index];
      console.log(item);
      item.isGood = !item.isGood;
      let goodParams = {
        businessId: id,
        type: 2,
      };
      if (!item.isGood) {
        item.likeNum++;
        getGuideAdd(goodParams).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("点赞成功");
          }
        });
      } else {
        item.likeNum--;
        getGuideReduce(goodParams).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.warning("点赞取消");
          }
        });
      }
    },
    // 收藏
    getCollect(index, id) {
      // this.isCollect =!this.isCollect;
      let item = this.articleList[index];
      // console.log(item);
      item.isCollect = !item.isCollect;
      let goodParams = {
        businessId: id,
        type: 3,
      };
      if (!item.isCollect) {
        item.collectNum++;
        getGuideAdd(goodParams).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("收藏成功");
          }
        });
      } else {
        item.collectNum--;
        getGuideReduce(goodParams).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message.warning("收藏取消");
          }
        });
      }
    },
    // 跳转详情页
    getDetail(id) {
      this.$router.push({
        name: "guideDetail",
        query: {
          id,
        },
      });
    },
    // 分页
    handleSizeChange(size) {
      this.allParams.size = size;
    },
    handleCurrentChange(currentPage) {
      this.allParams.page = currentPage;
      console.log(this.allParams.page);
    },
    // 表单
    getFrom() {
      this.isShow = !this.isShow;
    },
    handleClick(e) {
      this.allParams.approveStatuses = e.name.split(",");
      this.getMyArticle();
    },
  },
  created() {
    // this.getMyArticle();
    getActicleoption().then((res) => {
      this.typeOption = res.result.typeOptions;
      this.brandOption = res.result.brandOptions;
      this.moduleOption = res.result.moduleOptions;
      this.tagOption = res.result.tagOptions;
    });
    // 用户信息
    getUserinfro().then((res) => {
      if (res.code == 200) {
        this.userinfro = res.result;
        console.log(this.userinfro, "个人信息");
      }
    });
    // 投稿信息
    getUserOption().then((res) => {
      // console.log(res);
      this.useroption = res.result;
    });
  },
  watch: {
    allParams: {
      handler(val, oldval) {
        // console.log(val,'1111');
        this.getMyArticle(val);
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
@import "./../../assets/style/edit.css";
.mine {
  width: 100%;
  // padding: 10px 0 0;
  .mine-head {
    padding: 40px 12%;
    background: #4370f3;
    color: #fff;
    display: flex;
    justify-content: space-around;
    .header-box {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
      text-align: justify;
      width: 90%;
      img {
        width: 54px;
        height: 54px;
        display: block;
        border-radius: 50%;
        margin-right: 15px;
      }
    }
    .sale {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
    }
    .header-tit {
      font-size: 16px;
      font-weight: 600;
      color: #ffffff;
      line-height: 22px;
      margin-bottom: 8px;
    }
  }
  .mine-con {
    margin: 20px auto;
    width: 62.5%;
    display: flex;
    justify-content: space-between;
    .mine-left {
      width: 19%;
      height: calc(100vh - 325px);
      display: table;
      background: #fff;
      border-radius: 10px;
      .left-tit {
        padding: 20px 20px;
        font-size: 18px;
        line-height: 30px;
        border-bottom: 1px solid #000;
      }
    }
    .mine-right {
      width: 79%;
      background: #fff;
      border-radius: 10px;
      .right-con {
        position: relative;
        padding: 20px 20px;
        .person-infro {
          line-height: 30px;
        }
        .all-con {
          background: #fff;
          // padding: 10px;
          border-radius: 5px;
          .all-list {
            padding: 10px 20px;
            background: #f5f7fa;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            &:last-child {
              margin-bottom: 0;
              border-bottom: none;
            }
            .img-list {
              position: relative;
              height: 100%;
              img {
                height: 130px;
                display: block;
              }
              i {
                font-size: 60px;
                color: #fff;
                position: absolute;
                top: 28%;
                left: 29%;
              }
            }
            .img-con {
              width: 78%;
              // padding: 1% 10% 1% 1%;
              .img-title {
                width: 100%;
                font-size: 18px;
                font-weight: 600;
                color: #191a24;
                line-height: 25px;
                overflow: hidden; //溢出隐藏
                white-space: nowrap; //禁止换行
                text-overflow: ellipsis;
                margin-bottom: 10px;
              }
              .img-intro {
                font-size: 12px;
                font-weight: 400;
                color: #666666;
                line-height: 17px;
                text-align: justify;
                margin-bottom: 5px;
                width: 100%;
                // height: 32%;
                overflow: hidden;
                display: -webkit-box; /*弹性伸缩盒子*/
                -webkit-box-orient: vertical; /*子元素垂直排列*/
                -webkit-line-clamp: 2; /*可以显示的行数，超出部分用...表示*/
                text-overflow: ellipsis; /*（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)*/
              }
              ul {
                display: flex;
                font-size: 12px;
                color: #fff;
                li {
                    padding: 3px 15px;
                    background: #ECF1FF;
                    border-radius: 2px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #4370F3;
                    line-height: 20px;
                    margin-right: 1%;
                }
              }
              .img-bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 24px;
                .bot-left {
                  display: flex;
                  align-items: center;
                  img {
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    display: block;
                    margin-right: 5px;
                  }
                }
                .bot-right {
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  p {
                    display: flex;
                    align-items: center;
                    margin-right: 10px;
                    img {
                      width: 18px;
                      height: 18px;
                      display: block;
                      margin-right: 2px;
                    }
                    span {
                      display: block;
                    }
                  }
                }
              }
            }
          }
        }
        .btn {
          position: absolute;
          top: 10px;
          right: 3%;
          z-index: 99;
        }
      }
      .right-from {
        padding: 20px;
        h3 {
          text-align: center;
          margin-bottom: 20px;
        }
        .el-select {
          width: 100%;
        }
        .inputcontent {
          margin-top: 10px;
        }
        .dialog-footer {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .el-button {
            display: block;
          }
        }
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 148px;
        height: 148px;
        line-height: 146px;
        text-align: center;
        border: 1px solid #ccc;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
      .imgmar {
        margin-top: 40px;
      }
      .el-checkbox {
        display: block;
      }
    }
  }
}
.el-pagination {
  text-align: right;
  margin-top: 10px;
}
</style>